<template>
    <!-- html -->
    <div class="person">
        <h3>this is Car</h3>
        <h3>{{ car.brand }} : {{ car.price }}</h3>
        <button @click="changePrece">点击</button>
        <ul>
            <li v-for="item in games" :key="item.id">{{ item.name }}</li>
        </ul>
        <hr/>
        <h3>{{ carRef.brand }} : {{ carRef.price }}</h3>
        <button @click="changePreceRef">点击</button>
    </div>
</template>

<!-- npm i vite-plugin-vue-setup-extend -D -->
<script lang="ts" setup name='Car'>
import { reactive, ref } from 'vue';

//对象类型数据
let car = reactive({ brand: '奔驰', price: 100 })
//reactive只能定义：对象类型的响应式数据
let games = reactive([
    { id: 1, name: "xxx" },
    { id: 1, name: "xxx" },
    { id: 1, name: "xxx" }
])

//ref可以定义： 基本类型响应式数据 和 对象类型的响应式数据
let carRef = ref({ brand: '奔驰Ref', price: 100 })

function changePreceRef() {
    //carRef.value.price += 1
    // carRef.value.price
    carRef.value = { brand: '宝马', price: 1000 }
}

// console.log(1)
function changePrece() {
    //car.price += 1
    //reactive 如果修改 直接替换原来的对象 reactive将会失去响应式数据
    //car = reactive({ brand: '宝马', price: 1000 })
    // car = { brand: '宝马', price: 1000 }

    //深拷贝
    Object.assign(car,{ brand: '宝马', price: 1000 })
}

</script>

<style>
/* 样式 */
.person {
    background-color: skyblue;
    border-radius: 10px;
    padding: 20px;
}
</style>